<!--
 * @Author: 鱿鱼溪学院
 * @Date: 2024-10-06 12:42:20
 * @LastEditTime: 2024-10-16 02:17:49
 * @LastEditors: 鱿鱼溪学院
 * @Description: 
 * @FilePath: \yyx-play\src\App.vue
 * Copyright 鱿鱼溪学院 by edu v1.0
 * 天道酬勤
-->
<template>
  <div id="container" ref="container" class="container">
    <!--左侧区域 -->
    <div id="left" class="left" ref="left" style="display: flex">
      <!-- 最左侧播放导航条 -->
      <div
        class="aside-bar"
        style="display: flex; flex-direction: column; z-index: 999"
      >
        <div class="back">
          <el-icon :size="25" style="display: relative; left: 15px; top: 15px">
            <Back />
          </el-icon>
        </div>
        <ul class="aside-menus" style="">
          <div class="divider"></div>
          <li
            @click="chapterListRef.showAndInit()"
            v-clickoutside:[excludes]="closeHandle"
          >
            <el-icon :size="25" style="display: relative; top: 3px">
              <List />
            </el-icon>
            <span>章节</span>
          </li>
          <li @click="handleWenDa()">
            <el-icon :size="25" style="color: #fff">
              <Cpu />
            </el-icon>

            <span>问答</span>
          </li>

          <li @click="handleNote()">
            <el-icon :size="25" style="color: #fff">
              <Edit />
            </el-icon>

            <span>笔记</span>
          </li>
          <li @click="handleSource()">
            <el-icon :size="25">
              <Grid></Grid>
            </el-icon>
            <span>资料</span>
          </li>
          <li>
            <el-icon :size="25">
              <Message />
            </el-icon>
            <span>反馈</span>
          </li>
          <li class="biaozhu">
            <el-icon :size="25">
              <House />
            </el-icon>
            <span>标注</span>
          </li>
          <div class="divider"></div>
        </ul>

        <div class="avatar" style="margin-top: 20px; padding-left: 11px">
          <el-avatar shape="circle" :size="40" :src="avatar_url" />
        </div>
      </div>
      <!-- 章节视频区域 -->
      <div
        class="less-warp"
        id="less-warp"
        ref="less-warp"
        style="position: relative; width: 100%; height: 100%"
      >
        <div class="chapterList">
          <!-- 章节显示 -->
          <Transition name="slide-fade">
            <ChapterList ref="chapterListRef"></ChapterList>
          </Transition>
        </div>

        <div class="less-name">
          <h2>2-1 为什么需要编程规范？</h2>
        </div>

        <div class="box video-box">
          <vueVideoPlus v-bind="options" class="video-box" />
        </div>
        <!-- <Play></Play> -->
      </div>
    </div>
    <!-- 拖动切换 -->
    <div id="resize" ref="resize" class="resize" v-show="resizeVisible"></div>
    <!-- 右侧区域 -->
    <div id="right" ref="right" class="right">
      <Note v-if="noteVisible"></Note>
      <Source v-if="sourceVisible"></Source>
      <div class="min-right" v-if="minRightVisible" @click="handleWenDa()">
        <div class="min-right-box">
          <el-icon class="min-icon" style=""><Back /></el-icon>
        </div>
      </div>
      <QueAns ref="queAns" :queansVisible="queansVisible"></QueAns>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { drag, ms, ps } from "./utils/index";
//导入章节列表组件
import ChapterList from "./components/lesson/ChapterList.vue";
//导入问答组件
import QueAns from "./components/lesson/QueAns.vue";
//导入笔记组件
import Note from "./components/lesson/Note.vue";
//导入资料下载组件
import Source from "./components/lesson/Source.vue";
import Play from "./components/lesson/Play.vue";

import Video from "./components/video/Video.vue";

const left = ref();
const resize = ref();
const right = ref();
const container = ref();
const video = ref();

let excludes = ref([]);

//const dragEl = ref([left, resize, right, video]);

//课程章节是否显示
const isShow = ref(false);
//弹出章节的引用
const chapterListRef = ref();
//问答区域的引用
const queAns = ref();

//控制问答区显示变量，默认显示,方便课程页面，默认显示
const queansVisible = ref(true);
//控制笔记区显示变量，默认关闭
const noteVisible = ref(false);
//控制资料区显示变量，默认关闭
const sourceVisible = ref(false);
//控制最右侧箭头出现的变量，默认不显示，只有主动点击问答才显示
const minRightVisible = ref(false);
//控制拖动左右屏幕大小显示变量，默认显示
const resizeVisible = ref(true);

//视频配置
const options = reactive({
  //  width: "800px", //播放器高度
  // height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "https://yys.v.netease.com/2023/0727/7698d6c71ed67957ee8131180c59c86eqt.mp4", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制器
});

//控制问答区域显示隐藏方法
const handleWenDa = () => {
  //本来我用取反的方式来实现，因为涉及很多的变量，实现起来很麻烦，抛弃
  // // drag();
  // resizeVisible.value = !resizeVisible.value;
  // queansVisible.value = !queansVisible.value;
  // minRightVisible.value = !minRightVisible.value;
  // if (queansVisible.value == false) {
  //   ps(right.value, left.value, container.value);
  // } else {
  //   ms(right.value, left.value, container.value);
  // }
  noteVisible.value = false;
  sourceVisible.value = false;
  if (queansVisible.value == false) {
    queansVisible.value = true;
    minRightVisible.value = false;
    resizeVisible.value = true;
    ms(right.value, left.value, container.value);
  } else {
    queansVisible.value = false;
    minRightVisible.value = true;
    resizeVisible.value = false;
    ps(right.value, left.value, container.value);
  }
};

//控制笔记区域显示隐藏方法
const handleNote = () => {
  queansVisible.value = false;
  sourceVisible.value = false;
  if (noteVisible.value == false) {
    noteVisible.value = true;
    minRightVisible.value = false;
    resizeVisible.value = true;
    ms(right.value, left.value, container.value);
  } else {
    noteVisible.value = false;
    minRightVisible.value = true;
    resizeVisible.value = false;
    ps(right.value, left.value, container.value);
  }
};

//控制笔记区域显示隐藏方法
const handleSource = () => {
  noteVisible.value = false;
  queansVisible.value = false;
  if (sourceVisible.value == false) {
    sourceVisible.value = true;
    minRightVisible.value = false;
    resizeVisible.value = true;
    ms(right.value, left.value, container.value);
  } else {
    sourceVisible.value = false;
    minRightVisible.value = true;
    resizeVisible.value = false;
    ps(right.value, left.value, container.value);
  }
};

// const cc = () => {
//   console.log(aa.value);
// };

const avatar_url = ref(
  "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
);

//const activeNames = ref(["1", "2", "3", "4"]);
const handleChange = (val: string[]) => {
  console.log(val);
};

//点击任意区域关闭章节列表
const closeHandle = (e: Event) => {
  console.log(e);
  chapterListRef.value.closeBox();
};

// let car = ref(false);

const model: any = ref();

onMounted(() => {
  drag(resize.value, left.value, right.value, container.value);
  // console.log(right.value)
  // console.log(chapterListRef.value.chapterR(), "cha");
  excludes.value.push(document.querySelector(".chapterList") as never);
});
</script>

<style scoped lang="less">
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(-100%);
  opacity: 1;
}

.right {
  .min-right {
    background-color: #5e5e5e;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .min-right-box {
      .min-icon {
        display: block;
        height: 100%;
        width: 100%;
        color: #fff;
        font-size: 45px;
        opacity: 0.5;
        font-weight: 900;
      }
    }
  }
}

.note {
  .note-title {
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    font-weight: 700;
    padding: 0 20px;
  }
}

// ::v-deep.el-collapse {
//   background-color: red !important;
//   color: red;
// }

// .el-collapse {
//   background-color: red !important;
// }
//课程章节，视频区域
.less-warp {
  display: flex;
  width: 50%;
  background-color: #1d1f21;
  flex-direction: column;
  // background-color: red;
  .less-name {
    height: 50px;
    padding: 0 0 0 20px;

    h2 {
      display: inline-block;
      vertical-align: middle;
      line-height: 50px;
      font-size: 18px;
      color: #fff;
      //background-color: red;
    }
  }
  .video-box {
    // background-color: #fff;
    width: 100%;
    height: 100%;
    //   position: absolute;
    bottom: 0;
    // top: 50px;
    overflow: hidden;
  }
}
// .box {
//   position: absolute;
//   bottom: 0;
//   top: 50px;
//   width: 100%;
//   background-color: #fff;
//   overflow: hidden;
// }
</style>
